<template>
  <div class="common-layout">
    <el-container>
      <el-header class="top">
        <div class="top-box">
          <span>仓库管理/大黄科技</span>
          <div class="top-login">
            <router-link to="/loginview" v-if="!isopen">
              <p>登录</p>
            </router-link>
            <div v-else class="login-name">
              <el-icon color="#409efc">
                <UserFilled />
              </el-icon>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{ user_name }}
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <router-link to="/usercenter">
                      <el-dropdown-item command="a">个人中心</el-dropdown-item>
                    </router-link>
                  
                    <el-dropdown-item command="b" @click="roo">退出登录</el-dropdown-item>
                    
                    <template>
                        <el-button plain @click="open">确定要退出登录吗？</el-button>
                      </template>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <p></p>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside class="left">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon>
                      <location />
                    </el-icon>
                    <span>首页</span>
                  </template>
                  <el-menu-item-group title="信息">
                    <router-link to="/flowpath">
                      <el-menu-item index="1-1">进出货流程</el-menu-item>
                    </router-link>
                    <router-link to="/shipment">
                      <el-menu-item index="1-2">出货</el-menu-item>
                    </router-link>
                  </el-menu-item-group>
                  <el-menu-item-group title="仓库信息">
                    <router-link to="/warehouse">
                      <el-menu-item index="1-4">库存</el-menu-item>
                    </router-link>

                    <router-link to="/warehousemessage">
                      <el-menu-item index="1-5">仓库信息</el-menu-item>
                    </router-link>
                  </el-menu-item-group>
                </el-sub-menu>
                <el-menu-item index="2">
                  <el-icon><icon-menu /></el-icon>
                  <router-link to="/User_Add">
                    <span>工作台</span>
                  </router-link>
                </el-menu-item>
                <el-menu-item index="3">
                  <el-icon>
                    <setting />
                  </el-icon>
                  <router-link to="usercenter">
                    <span>用户中心</span>
                  </router-link>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main class="text">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="less" scoped>
@import url("./assets/less/public.less");
.common-layout {
  position: fixed;
  width: 100%;
  height: 100%;

  .top {
    background-color: @bg;

    .top-login {
      position: absolute;
      right: 20px;

      .login-name {
        display: flex;
        align-items: center;

        > p {
          margin-left: 5px;
        }
      }
    }

    .top-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .left {
    position: absolute;
    height: 100%;
    width: 15%;

    .el-row {
      display: block;
    }
    .el-menu {
      width: 200%;
      border-left: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    .el-col-12 {
      max-width: 100% ;
    }
  }

  .text {
    background-color: @bigbg;
    position: absolute;
    height: 100%;
    width: 85%;
    left: 15%;
  }
}
.el-dropdown-link{
  cursor: pointer;
  border: 0;
  margin-left: 5px;
  
}
.example-showcase .el-dropdown-link {
  border: 0;
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";

import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    '您确定要退出登录吗?',
    '退出登录',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '退出成功',
      })
      router.push('/loginview');
      localStorage.removeItem('NICK_NAME');
      localStorage.removeItem('TOKEN');
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退出',
      })
    })
}


const handleCommand = (command: string | number | object) => {
  // ElMessage(`click on item ${command}`)
}
let router = useRouter();
let isopen = ref(false);
let user_name: any = ref("");
let str = localStorage.getItem("TOKEN");
if (str) {
  isopen.value = true;
  user_name.value = localStorage.getItem("NICK_NAME");
}
const roo =()=>{
  open()
}
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
};
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
};


const login = () => {
  localStorage.setItem('TOKEN', 'true'); // 设置认证状态
  router.push('/flowpath'); // 导航到首页或其他页面
};
</script>
